<template>
  <Drawer title="选择内置分类">
    <Grid table-title="内置分类列表" />
  </Drawer>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'SelectDrawer',
});
import { computed, ref, watch } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { querySave } from '../data/api';
import { SelectGridOptions, storeId } from '../data/options';
import { message } from 'ant-design-vue';
import { useThrottleFn } from '@vueuse/core';

const emit = defineEmits(['success']);

// 抽屉提交
const onSubmit = useThrottleFn(async () => {
  console.log('onSubmit');
  let list = gridApi.grid.getCheckboxRecords();
  if (list.length === 0) {
    return message.warning('请选择内置分类');
  }
  let idsArr = list.map((item: any) => item.id);
  let ids = idsArr.join(',');
  console.log('ids', ids);
  let res: any = await querySave({ storeId: storeId.value, ids });
  message.success(res.message);
  onSucClose();
}, 1000);

// 抽屉配置
const [Drawer, drawerApi] = useVbenDrawer({
  class: 'w-2/5',
  onCancel() {
    drawerApi.close();
  },
  onConfirm: () => onSubmit(),
  // onOpenChange(isOpen: boolean) {
  //   if (isOpen) {
  //     let data = drawerApi.getData();
  //   }
  // },
});

//  表格配置
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: SelectGridOptions,
});

const onSucClose = () => {
  drawerApi.close();
  emit('success');
};
</script>

<style lang="scss" scoped></style>
